<!--模板-->
<template>
    <div class="demo">
                <span class="top">今天宝宝学会唱洗澡歌了</span>
                <div class="video_outer">
                    <div class="video_inner">
                        <div class="video">
                            <video class="player" id="video-player" src="../../static/images/pifeng.mp4" controls width="100%" height="100%" poster="../../static/images/timg.jpg"></video>
                        </div>
                    </div>
                </div>
                <div class="tab">
                    <span class="tab_left">啦啦啦</span>
                    <div class="head">
                        <img src="../../static/images/head.jpg" alt="">
                    </div>
                </div>

                <ul class="comment_ul"
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="loading"
                    infinite-scroll-distance="0">
                    <span class="comment_title">评论</span>
                    <li class="comment_li" v-for="item in dataList">
                        <div class="comment_name">{{item.name}}</div>
                        <div class="comment_content">{{item.comment}}</div>
                    </li>
                    <p v-show="loading" class="loading_more">
                        <mt-spinner type="fading-circle" :size="25" color="red"></mt-spinner>
                        <span>加载中...</span>
                    </p>

                    <!--<li class="comment_li">-->
                        <!--<div class="comment_name">佳佳</div>-->
                        <!--<div class="comment_content">宝宝真棒！</div>-->
                    <!--</li>-->
                    <!--<li class="comment_li">-->
                        <!--<div class="comment_name">佳佳</div>-->
                        <!--<div class="comment_content">宝宝真棒！</div>-->
                    <!--</li>-->
                    <!--<li class="comment_li">-->
                        <!--<div class="comment_name">佳佳</div>-->
                        <!--<div class="comment_content">宝宝真棒！</div>-->
                    <!--</li>-->
                    <!--<li class="comment_li">-->
                        <!--<div class="comment_name">佳佳</div>-->
                        <!--<div class="comment_content">宝宝真棒！</div>-->
                    <!--</li>-->
                </ul>
    </div>
</template>


<!--script-->
<script>
    import { InfiniteScroll,Spinner } from 'mint-ui'
    export default {
        name: 'demo',
        data () {
            return {
                msg: 'Welcome to Demo',
                dataList:[],
                flag :false,
                loading:false,
                id:0
            }
        },
        methods: {
            loadMore(){
                if(!this.flag){
                    this.flag = true;
                }else {
                    console.log("调用了loadMore.....");
                    this.loading = true;
                    setTimeout(() => {
                        let last = this.dataList[this.dataList.length - 1];
                        for (let i = 1; i <= 7; i++) {
                            let nLast = {};
                            nLast.name = last.name + i;
                            nLast.comment = last.comment + i;
                            this.dataList.push(nLast);
                        }

                        this.loading = false;
                    }, 2000);
                }
            },

            /**
             * 拉取评论数据
             */
            getComments(){
               this.$http.get("/goods").then(function (res) {
                   this.dataList = res.data.data;
               },function (err) {
                   console.log("err :"+err);
               })
           }
        },
        mounted(){ //挂载完毕时调用
            console.log('mounted.....');
            this.id = this.$route.params.video_id;
            this.getComments();
        }
    }
</script>

<!--样式-->
<style lang="css" scoped>
    @import "../../static/demo/css/demo.css";
</style>